<!DOCTYPE html>
<html>
<head>
	<title>nth-graph jQuery svgweb viewer and demonstration page</title>
	<link rel="stylesheet" rev="stylesheet" href="css/examples.css" type="text/css" media="screen" />
  <script src="svgweb/src/svg.js" data-path="svgweb/src"></script>
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.nth-graph.js"></script>
	<script type="text/javascript" src="js/jquery.nth-graph-view.js"></script>
	<script type="text/javascript" src="js/json-pp.js"></script>
	<script type="text/javascript" src="js/jquery.json-2.2.js"></script>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
	// <![CDATA[	
	$(document).ready(function() {
		// Accordion
		$("#accordion1").accordion({ header: "h3", collapsible:true, autoHeight:false, active:false });
		$("#accordion2").accordion({ header: "h3", collapsible:true, autoHeight:false, active:false });
		$("#accordion3").accordion({ header: "h3", collapsible:true, autoHeight:false, active:false });		

		
		var firstGraph = {"graph":{"version":"0.03"}  
				, "nodes":[
							  {"name":"start"}
							, {"ele":"#a1", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#b1", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#sum", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}}
							, {"name":"calc"
								, "process":"function() {"+
														"  this.sum = this.a1 + this.b1;"+
														"}"
							}
							, {"name":"stop"}
				  ]
				, "edges":[
							  {"from":0, "to":4, "type":"trans"}
							, {"from":4, "to":1, "type":"get", "name":"a1"}
							, {"from":4, "to":2, "type":"get", "name":"b1"}
							, {"from":4, "to":5, "type":"trans"}
							, {"from":4, "to":3, "type":"set", "name":"sum"}
				  ]
			};
		$("#example1").nthGraph(
				{ "cg":firstGraph });  
		
		$("#diagram-group").nthGraphView({ "g":firstGraph, "gv":{"graph":{"version":"0.03"}  
				, "nodes":[
							  {"cx":60, "cy":40, "view-type":"circle"}
							, {"cx":110, "cy":100, "view-type":"circle"}
							, {"cx":200, "cy":120, "view-type":"circle"}
							, {"cx":290, "cy":100, "view-type":"circle"}
							, {"cx":200, "cy":40, "view-type":"circle"}
							, {"cx":360, "cy":40, "view-type":"circle"}
				  ]
				, "edges":[
							  {"tail":{"angle":350}, "head":{"angle":190}}
							, {"tail":{"angle":120}, "head":{"angle":290}}
							, {"tail":{"angle":90}, "head":{"angle":270}}
							, {"tail":{"angle":350}, "head":{"angle":190}}
							, {"tail":{"angle":60}, "head":{"angle":250}}
				  ]
			}
		});
		fg_string = JPP("firstGraph", firstGraph);
		$("#first-graph-json").html(fg_string);

		var secondGraph = {"graph":{"version":"0.03"}  
			, "nodes":[
						  {"name":"start"}
						, {"ele":"#a2", "type":"in", "input":{"event":{"change":"traverse", "keyup":"traverse"}, "enforce":{"type":"number"}}}
						, {"ele":"#b2", "type":"in", "input":{"event":{"keyup":"traverse"}, "enforce":{"type":"number"}}}
						, {"ele":"#sum", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}}
						, {"name":"calc"
							, "process":"function() {"+
													"  this.sum = this.a2 + this.b2;"+
													"}"
						}
						, {"name":"stop"}
			  ]
			, "edges":[
						  {"from":0, "to":4, "type":"trans"}
						, {"from":4, "to":1, "type":"get", "name":"a2"}
						, {"from":4, "to":2, "type":"get", "name":"b2"}
						, {"from":4, "to":5, "type":"trans"}
						, {"from":4, "to":3, "type":"set", "name":"sum"}
			  ]
			};
		$("#example2").nthGraph(
				{ "cg":secondGraph 
		});
		$("#diagram-group-2").nthGraphView({ "g":secondGraph, "gv":{"graph":{"version":"0.03"}  
				, "nodes":[
							  {"cx":60, "cy":40, "view-type":"circle"}
							, {"cx":110, "cy":100, "view-type":"circle"}
							, {"cx":200, "cy":120, "view-type":"circle"}
							, {"cx":290, "cy":100, "view-type":"circle"}
							, {"cx":200, "cy":40, "view-type":"circle"}
							, {"cx":360, "cy":40, "view-type":"circle"}
				  ]
				, "edges":[
							  {"tail":{"angle":350}, "head":{"angle":190}}
							, {"tail":{"angle":120}, "head":{"angle":290}}
							, {"tail":{"angle":90}, "head":{"angle":270}}
							, {"tail":{"angle":350}, "head":{"angle":190}}
							, {"tail":{"angle":60}, "head":{"angle":250}}
				  ]
			}
		});
		fg_string = JeskPP("secondGraph", secondGraph);
		$("#second-graph-json").html(fg_string);
		var thirdGraph = {"graph":{"version":"0.03"}  
				, "nodes":[
							  {"name":"start"}
							, {"ele":"#a3", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#b3", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#c3", "type":"in", "input":{"event":{"keyup":"traverse"}}}
							, {"ele":"#sum", "type":"out", "output":{"event":{"change":"immediately"}, "type":"text"}}
							, {"name":"calc"
								, "process":"function() {"+
														"  this.sum = this.a3 + this.b3 + this.c3;"+
														"}"
							}
							, {"name":"stop"}
				  ]
				, "edges":[
							  {"from":0, "to":5, "type":"trans"}
							, {"from":5, "to":1, "type":"get", "name":"a3", "enforce":{"type":"number"}}
							, {"from":5, "to":2, "type":"get", "name":"b3", "enforce":{"type":"number"}}
							, {"from":5, "to":3, "type":"get", "name":"c3", "enforce":{"type":"number"}}
							, {"from":5, "to":6, "type":"trans"}
							, {"from":5, "to":4, "type":"set", "name":"sum"}
				  ]
			};
		$("#example3").nthGraph(
				{ "cg":thirdGraph
		});
		$("#diagram-group-3").nthGraphView({ "g":thirdGraph, "gv":{"graph":{"version":"0.03"}  
				, "nodes":[
							  {"cx":60, "cy":40, "view-type":"circle"}
							, {"cx":90, "cy":110, "view-type":"circle"}
							, {"cx":170, "cy":120, "view-type":"circle"}
							, {"cx":250, "cy":120, "view-type":"circle"}
							, {"cx":330, "cy":110, "view-type":"circle"}
							, {"cx":200, "cy":40, "view-type":"circle"}
							, {"cx":360, "cy":40, "view-type":"circle"}
				  ]
				, "edges":[
							  {"tail":{"angle":350}, "head":{"angle":190}}
							, {"tail":{"angle":120}, "head":{"angle":290}}
							, {"tail":{"angle":100}, "head":{"angle":280}}
							, {"tail":{"angle":80}, "head":{"angle":260}}
							, {"tail":{"angle":350}, "head":{"angle":190}}
							, {"tail":{"angle":60}, "head":{"angle":250}}
				  ]
			}
		});
		fg_string = JeskPP("thirdGraph", thirdGraph);
		$("#third-graph-json").html(fg_string);
	
	});
	
	// ]]>
	</script>
</head>
<body>
<h1>A Demonstration of "nth-graph" and Simple Math</h1>
<p>This is a simple demonstration of the use of "nth-graph!"</p>
<p><strong>nth-graph</strong> is a functional "flow process diagramming" language that runs in many environments, including this browser. 
See the diagrams below each example, they are generated directly from the same nth-graph data that is running 
the UI interactivity. For more information about this programming scheme see the project site for <a href="http://code.google.com/p/nth-graph/">nth-graph</a>. 
</p>

<h2>Input from form fields</h2>
<div id="example1">
				<input type="text" name="a1" id="a1" value="4" /> + <input type="text" name="b1" id="b1" value="2" /> = <span id="sum" >?</span>
</div>
<div id="accordion1">
	<div>
		<h3><a href="#">Example 1 Discussion</a></h3>
		<div>
				<p>Opps, If you were expecting the two inputs to be added together (mathmatically) this would be an unfortunate surprise. Instead this rusults in a concatination of the two inputs. See the next example for true addition.</p>
		</div>
	</div>
	<div>
		<h3><a href="#">Diagram of the nth-graph for example 1</a></h3>
		<div>
      <script type="image/svg+xml">
        <svg width="400" height="200"
             style="background-color: #FFF3E1; display: block; margin-bottom: 5px;"
             id="diagram-1">
          <g id="diagram-group" 
             fill="blue" 
             style="font-size: 18px; text-anchor: middle; font-family: serif;">
            <text x="100" y="155">nth-graph</text>
            <text x="100" y="175">Simple Math Diagram 1</text>
          </g>
        </svg>
      </script>
		</div>
	</div>
	<div>
		<h3><a href="#">The nth-graph for example 1 in text form</a></h3>
		<div>
			<pre id="first-graph-json">{}</pre>
		</div>
	</div>
</div>

<h2>Addition of two numbers</h2>
<div id="example2">
			<input type="text" name="a2" id="a2" value="2" /> + 
			<input type="text" name="b2" id="b2" value="2" />
			 = <span id="sum" >?</span>
</div>
<div id="accordion2">
	<div>
		<h3><a href="#">Example 2 Discussion</a></h3>
		<div>
			<p>Now this is addition and not concatination of strings as in the first example.  In this case the input nodes #a2 and #b2 "enforce" the input 
				data type to be a number, and not a string, as in the first example.
			</p>
		</div>
	</div>
	<div>
		<h3><a href="#">Diagram of the nth-graph for example 2</a></h3>
		<div>
      <script type="image/svg+xml">
        <svg width="400" height="200"
             style="background-color: #FFF3E1; display: block; margin-bottom: 5px;"
             id="diagram-2">
          <g id="diagram-group-2" 
             fill="blue" 
             style="font-size: 18px; text-anchor: middle; font-family: serif;">
            <text x="100" y="155">nth-graph</text>
            <text x="100" y="175">Simple Math Diagram 2</text>
          </g>
        </svg>
      </script>
		</div>
	</div>
	<div>
		<h3><a href="#">The nth-graph, in text form, for example 2</a></h3>
		<div>
			<pre id="second-graph-json">{}</pre>
		</div>
	</div>
</div>

<h2>Addition of more numbers...</h2>
<div id="example3">
			<input type="text" name="a3" id="a3" value="1" /> + 
			<input type="text" name="b3" id="b3" value="2" /> + 
			<input type="text" name="c3" id="c3" value="3" />
			 = <span id="sum" >?</span>
</div>
<div id="accordion3">
	<div>
		<h3><a href="#">Example 3 Discussion</a></h3>
		<div>
			<p>This is also addition! In this case the "get" edges "enforce" the data type to be a number. So any data passing through these edges will be converted a number.</p>
		</div>
	</div>
	<div>
		<h3><a href="#">Diagram of the nth-graph for example 3</a></h3>
		<div>
      <script type="image/svg+xml">
        <svg width="400" height="200"
             style="background-color: #FFF3E1; display: block; margin-bottom: 5px;"
             id="diagram-3">
          <g id="diagram-group-3" 
             fill="blue" 
             style="font-size: 18px; text-anchor: middle; font-family: serif;">
            <text x="100" y="165">nth-graph</text>
            <text x="100" y="185">Simple Math Diagram 3</text>
          </g>
        </svg>
      </script>
		</div>
	</div>
	<div>
		<h3><a href="#">The nth-graph, in text form, for example 3</a></h3>
		<div>
      <pre id="third-graph-json">{}</pre>
		</div>
	</div>
</div>

</body>
</html>